<template>
	<view class="loginNum">
		<view class="inputLogin">
			<input type="number" value="" placeholder="请输入手机号" v-model="telephone" />
			<input type="number" value="" placeholder="请输入验证码" v-model="verCode" />
			<button type="primary" size="mini" @click="getNumber" :class="verCodeBtn.getNum == 1 ? 'getNum' : ''">{{ verCodeBtn.getNumWord}}</button>
		</view>
		<button type="primary" @click="loginReq">登录</button>
		<text>未注册的用户将自动创建账号</text>
		<text @click="jumpReg">注册</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				telephone: "",
				verCode: "",
				verCodeBtn: {
					getNum: 0,
					getNumWord: "获取验证码"
				}
			}
		},
		methods: {
			getNumber() {
				console.log(Number(this.telephone))
				uni.request({
					url: "http://123.57.67.148:3000/mock/591/getVerCode",
					method: "POST",
					data: {
						telephone: this.telephone
					},
					success: (res) => {
						if(res.data.code == 200) {
							uni.showModal({
								content: res.data.data.verCode
							});
							this.verCodeBtn.getNum = 1;
							this.verCodeBtn.getNumWord = res.data.msg;
						}
						console.log(res.data)
					}
				});
			},
			jumpReg() {
				uni.navigateTo({
				    url: '/pages/register/register'
				});
			},
			loginReq() {
				uni.showLoading({
				    title: '登录中',
				});
				uni.request({
					url: "http://123.57.67.148:3000/mock/591/login",
					method: "POST",
					data: {
						userName: this.userName,
						password: this.password
					},
					header: {
						"custom-header": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						setTimeout(function () {
						    uni.hideLoading();
						}, 1000);
						if (res.data.code == 200){
							this.$store.state.user.userName = this.userName;
							this.$store.state.user.password = this.password;
							uni.showToast({
								title: res.data.msg
							});
							setTimeout(function () {
							    uni.switchTab({
							    	url: "/pages/home/home"
							    })
							}, 1000);
						} else {
							uni.showToast({
								icon: "none",
								title: "验证码错误"
							})
						}
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
.getNum {
	background-color: #CACACA;
}
.inputLogin {
	position: absolute;
	top: 400rpx;
	left: 0;
	right: 0;
	/* width: 500rpx; */
	height: 220rpx;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
	margin-left: 20rpx;
	margin-right: 20rpx;
}
.inputLogin > input {
	border-bottom: 2rpx solid #dcdcdc;
	height: 60rpx;
}
.inputLogin > button {
	position: absolute;
	top: 120rpx;
	right: 12rpx;
	height: ;
}
.loginNum > button {
	position: absolute;
	bottom: 400rpx;
	left: 0;
	right: 0;
	margin-left: 20rpx;
	margin-right: 20rpx;
	background-color: #FED501;
}
.loginNum > text:nth-of-type(1) {
	position: absolute;
	bottom: 340rpx;
	left: 20rpx;
	font-size: 20rpx;
	color: #b5b5b5;
}
.loginNum > text:nth-of-type(2) {
	position: absolute;
	bottom: 330rpx;
	right: 20rpx;
	color: #FED501;
}
</style>
